缓存 Rive 文件

在大多数情况下，.riv 文件应该可以快速加载，手动管理 RiveFile 并非必要。但如果你打算在应用的多个部分中使用同一 .riv 文件，甚至在同一屏幕上使用，将文件加载一次并保留在内存中可能会更有优势。

示例用法

以下是一个基本示例，说明如何预加载 Rive 文件，并将数据传递给多个 Rive 实例。

const rive = require("@rive-app/canvas");

let riveInstances = [];

function loadRiveFile(src, onSuccess, onError) {
const file = new rive.RiveFile({
    src: src,
    onLoad: () => onSuccess(file),
    onLoadError: onError,
});
// 记得调用 init() 触发加载；
file.init().catch(onError);
}

function setupRiveInstance(loadedRiveFile, canvasId) {
const canvas = document.getElementById(canvasId);
if (!canvas) return;

const riveInstance = new rive.Rive({
    riveFile: loadedRiveFile,
    // 确保指定正确的状态机（或动画）名称
    stateMachines: "Motion", // 要播放的状态机名称
    canvas: canvas,
    layout: new rive.Layout({
    fit: rive.Fit.FitWidth,
    alignment: rive.Alignment.Center,
    }),
    autoplay: true,
    onLoad: () => {
    // 使用设备像素比防止 canvas 模糊
    riveInstance.resizeDrawingSurfaceToCanvas();
    },
});

riveInstances.push(riveInstance);
}

// 加载 .riv 文件并使用同一已加载的 RiveFile 初始化多个 Rive 实例
loadRiveFile(
"clean_the_car.riv",
(file) => {
    setupRiveInstance(file, "rive-canvas-1");
    setupRiveInstance(file, "rive-canvas-2");
    // 你也可以在此存储已加载 RiveFile 的引用，以便稍后初始化其他 Rive 实例。
},
(error) => {
    console.error("Failed to load Rive file:", error);
}
);

// 如果窗口调整大小，则为所有实例调整绘制表面
window.addEventListener(
"resize",
() => {
    riveInstances.forEach((instance) => {
    if (instance) {
        instance.resizeDrawingSurfaceToCanvas();
    }
    });
},
false
);